<template>
  <div class="wrapper">
    <!--header部分-->
    <header>
        <p>用户信息</p>
    </header>
    <!--用户信息部分-->
    <!--表单部分-->
    <div class="slot1" @click="uploadImg();noDeveloped()">
        <div class="slot1_div">
                <img class="user-circle-url" :src="user.userImg">
        </div>
        <div class="slot1_text">
            <p>
                <span>头像</span>
            </p>
        </div>
    </div>
    <div class="division1"></div>
    <div class="slot2">
        <div class="slot2_div">
            <i class="fa fa-chevron-right fa-2x" @click="updateUser"></i>
        </div>
        <div class="slot_text">
            <p>
                <span>用户名</span>
            </p>
        </div>
        <div class="slot2_info">
            <p>{{user.userName}}</p>
        </div> 
    </div>
    <div class="slot3">
        <div class="slot3_div">
            <i class="fa fa-chevron-right fa-2x" @click="toUserAddress"></i>
        </div>
        <div class="slot_text">
            <p>
                <span>地址管理</span>
            </p>
        </div>
    </div>
    <div class="division2"></div>
    <div class="slot4">
        <div class="slot4_div">
            <i class="fa fa-chevron-right fa-2x"  @click="toOrderList"></i>
        </div>
        <div class="slot_text">
            <p>
                <span>历史订单</span>
            </p>
        </div>
    </div>
    <div class="division3"></div>
    <div class="slot5">
        <div class="slot5_div">
            <i class="fa fa-chevron-right fa-2x" @click="noDeveloped"></i>
        </div>
        <div class="slot_text">
            <p>
                <span>客服咨询</span>
            </p>
        </div>
    </div>
    <div class="division4"></div>
    <div class="slot6">
        <div class="slot6_div">
            <i class="fa fa-chevron-right fa-2x" @click="loginOut"></i>
        </div>
        <div class="slot_text">
            <p>
                <span>退出登录</span>
            </p>
        </div>
    </div>

    <!--底部菜单部分--> 
    <Footer></Footer>
  </div>   
    
</template>

<script>
import Footer from "../components/Footer.vue"
export default {
    name: 'UserMessage',
    data() {
        return {
            user: {},
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",//到时切换成用户的头像
        }
    },
    created() {
        this.user = this.$getSessionStorage('user');
        if(this.user.userImg == null || this.user.userImg === ''){
            this.user.userImg = this.circleUrl;
            console.log('empty avatar');
        }
        // console.log(this.deliveryAddress)
    },
    methods: {
        updateUser() {
            this.$router.push({
                path:'/editUser',
            })
        },
        toOrderList(){
            this.$router.push({path:'/orderList'});
        },
        uploadImg() {
            console.log('uploadImg');
        },
        loginOut() {
            this.$removeSessionStorage('user');
            this.$router.push({path:'/login'});
        },
        goBack() {
            this.$router.go(-1);
        },
        noDeveloped() {
            this.$message({
                message: '功能升级中~',
                type: 'warning'
            });
        },
        toUserAddress() {
            this.$router.push({path:'/userAddress',query:{businessId:this.businessId}});
        }
    },
    components: {
        Footer
    }
}
</script>

<style scpoed>
/* 总容器 */
.wrapper {
    width: 100%;
    height: 100%;
}

/* header */
.wrapper header {
    width: 100%;
    height: 12vw;
    background: #0097FF;
    color: #FFF;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* 用户信息栏部分 */
.wrapper .slot_text { 
    border-width: 0px; 
    position: absolute; 
    left: 3vw; 
    top: 5vw; 
    width: 25vw;
    font-size: 5vw;
}
.wrapper .slot1 {
    border-width: 0vw;
    position: absolute;
    left: 8vw;
    top: 20vw;
    width: 90vw;
    height: 22vw;
    color: rgb(0, 0, 0);
}
.wrapper .slot1_div { 
    position: absolute; 
    left: 0vw; 
    top: 0vw; 
    width: 85vw; 
    height: 22vw; 
    background-color: rgb(248, 248, 248); 
    border-radius: 3vw 3vw 0vw 0vw; 
    color: rgb(0, 0, 0); 
    text-align: right;
}
.wrapper .slot1_text { 
    position: absolute; 
    left: 3vw; 
    top: 6vw; 
    width: 25vw; 
    font-size: 5vw;
}
.wrapper .division1 {
    position: absolute; 
    top: 42vw;
    left: 15vw; 
    width: 70vw;
    border-style: solid;
    border-width: 0.1vw;
    color: rgb(229, 229, 229);
    z-index: 1000;
}
.wrapper .user-circle-url {
    position: absolute; 
    right: 4vw; 
    top: 3vw;
    width: 15vw;
}
.wrapper .fa-chevron-right {
    position: absolute; 
    right: 3vw; 
    top: 6vw;
    font-size: 5vw;
}
.wrapper .slot2 {
    border-width: 0vw;
    position: absolute;
    left: 8vw;
    top: 42vw;
    width: 90vw;
    height: 18vw;
    font-size: 4vw;
    color: rgb(0, 0, 0);
}
.wrapper .slot2_div { 
    position: absolute; 
    left: 0vw; 
    top: 0vw; 
    width: 85vw; 
    height: 18vw; 
    background-color: rgb(248, 248, 248); 
    border-radius: 0vw 0vw 3vw 3vw; 
    color: rgb(0, 0, 0); 
}
.wrapper .slot2_info { 
    border-width: 0px; 
    position: absolute; 
    right: 15vw; 
    top: 5.5vw; 
    width: 50vw; 
    text-align: right;
    font-size: 4.8vw;
    overflow-wrap: break-word; 
}
.wrapper .slot3 {
    border-width: 0vw;
    position: absolute;
    left: 8vw;
    top: 75vw;
    width: 90vw;
    height: 18vw;
    font-size: 4vw;
    color: rgb(0, 0, 0);
}
.wrapper .slot3_div { 
    position: absolute; 
    left: 0vw; 
    top: 0vw; 
    width: 85vw; 
    height: 18vw; 
    background-color: rgb(248, 248, 248); 
    border: none; 
    border-radius: 3vw 3vw 0vw 0vw; 
    box-shadow: none; 
    font-size: 3vw; 
    color: rgb(0, 0, 0); 
    text-align: right;
}
.wrapper .division2 {
    position: absolute; 
    top: 93vw;
    left: 15vw; 
    width: 70vw;
    border-style: solid;
    border-width: 0.1vw;
    color: rgb(229, 229, 229);
    z-index: 1000;
}
.wrapper .slot4 {
    border-width: 0vw;
    position: absolute;
    left: 8vw;
    top: 93vw;
    width: 90vw;
    height: 18vw;
    font-size: 4vw;
    color: rgb(0, 0, 0);
}
.wrapper .slot4_div { 
    position: absolute; 
    left: 0vw; 
    top: 0vw; 
    width: 85vw; 
    height: 18vw; 
    background-color: rgb(248, 248, 248); 
    border: none; 
    border-radius: 0vw 0vw 0vw 0vw; 
    box-shadow: none; 
    font-size: 3vw; 
    color: rgb(0, 0, 0); 
    text-align: right;
}
.wrapper .division3 {
    position: absolute; 
    top: 111vw;
    left: 15vw; 
    width: 70vw;
    border-style: solid;
    border-width: 0.1vw;
    color: rgb(229, 229, 229);
    z-index: 1000;
}
.wrapper .slot5 {
    border-width: 0vw;
    position: absolute;
    left: 8vw;
    top: 111vw;
    width: 90vw;
    height: 18vw;
    font-size: 4vw;
    color: rgb(0, 0, 0);
}
.wrapper .slot5_div { 
    position: absolute; 
    left: 0vw; 
    top: 0vw; 
    width: 85vw; 
    height: 18vw; 
    background-color: rgb(248, 248, 248); 
    border: none; 
    border-radius: 0vw 0vw 0vw 0vw; 
    box-shadow: none; 
    font-size: 3vw; 
    color: rgb(0, 0, 0); 
    text-align: right;
}
.wrapper .division4 {
    position: absolute; 
    top: 129vw;
    left: 15vw; 
    width: 70vw;
    border-style: solid;
    border-width: 0.1vw;
    color: rgb(229, 229, 229);
    z-index: 1000;
}
.wrapper .slot6 {
    border-width: 0vw;
    position: absolute;
    left: 8vw;
    top: 129vw;
    width: 90vw;
    height: 18vw;
    font-size: 4vw;
    color: rgb(0, 0, 0);
}
.wrapper .slot6_div { 
    position: absolute; 
    left: 0vw; 
    top: 0vw; 
    width: 85vw; 
    height: 18vw; 
    background-color: rgb(248, 248, 248); 
    border: none; 
    border-radius: 0vw 0vw 3vw 3vw; 
    box-shadow: none; 
    font-size: 3vw; 
    color: rgb(0, 0, 0); 
    text-align: right;
}
</style>